<template>
  <div id="scatterMap" class="scatterMap">
    <div id="loading" v-show="shopShow">正在加载出租车数据...</div>
    <div id="menuLeft">
      <div id="step1">
        <h5>数据选择:</h5>
        <el-cascader
            ref="getSelectData"
            placeholder="请选择需要渲染的数据"
            :options="options"
            @change="handleSelectChange"
            filterable>
        </el-cascader>
      </div>
      <div id="step2" >
        <el-button @click="addPonit1" :disabled="isDisabled">散点图</el-button>
      </div>
    </div>
    <!--<i class="el-icon-set-up" style="z-index: 9999; color:red; position: absolute;top: 40px;left: 12px;"></i>-->
    <!--左视图-->
    <div class="leftmap">
      <div id="entirelab">散点图1</div>
      <!--这里不设置 style后面的样式 是不会显示地图的-->
      <div ref="map" id="map_container" style="height:100%;width:100%;"></div>
    </div>
    <!--用于将左右两个视图隔开-->
    <div class="middlemap"></div>
    <!--右视图-->
    <div class="rightmap">
      <div id="partlab">散点图2</div>
      <div ref="rightmap" id="partScatter"></div>
    </div>
  </div>
</template>

<script>
//导包
import echarts from 'echarts'
import 'echarts-gl'
import 'echarts/extension/bmap/bmap'
import {baidumap} from "@/assets/js/Public/baiduditu";

export default {
  name: "Scatter",
  data() {
    return {
      //左视图地图容器
      leftmap:null,
      //右视图地图容器
      rightmap:null,
      // 百度地图个性化模板,也就是让百度地图底图为黑色,删除了一些其他图层标注
      // 原Echarts移植过来的map底图
      mapStyle: {
        styleJson: baidumap,
      },
      //定义地图的中心点经纬度坐标
      mapLng: 116.403,
      mapLat: 39.923,
      //显示层级
      mapZoom: 12,
      //下拉框选项
      options: this.$store.state.dataPoint[0].children,
      //用于存储一个总的数据(没有整合过的数据)
      scatterData: '',
      //用于存储散点图2的数据
      Scatterdata2:[],
      //下拉框数据
      downSelectData: '',
      isDisabled: true,
      shopShow: false,
    };
  },

  beforeCreate() {
    //两个方法都是传值给vuex的mutation改变state
    this.$store.commit('loadMenuDataPoint')
  },
  mounted () {
    this.initLeftmap();
  },
  methods: {
    //获取下拉框的选择
    handleSelectChange(val){
      this.shopShow = true
      //还在加载数据的时候，就禁止点击按钮
      this.isDisabled = true
      let downSelectData = this.$refs.getSelectData.getCheckedNodes()
      this.downSelectData = downSelectData[0].data.value
      console.log(this.downSelectData, '获取下拉节点的值');
      this.request.get("/taxiData/clickHot",
          {
            params: {
              downSelectData: this.downSelectData,
            }
          },
      ).then(res => {
        this.scatterData = res.data
        //数据加载从后端传输完成之后，文本就不显示
        this.shopShow = !this.shopShow
        //按钮可以点击
        this.isDisabled = !this.isDisabled
      })
    },
    //左视图初始化
    initLeftmap() {
      this.map = initMap({
        tilt: 0, //地图倾斜度
        heading: 0,
        center: [this.mapLng, this.mapLat],
        zoom: 12,
        style: purpleStyle  //设置地图样式
      });
      //视图绑定
      this.view = new mapvgl.View({
        map: this.map
      });

      this.initRightMap();
    },
    //右视图初始化
    initRightMap() {
      this.rightmap = this.$echarts.init(this.$refs.rightmap)
      this.rightmap.setOption({
        bmap: {
          center: [116.4, 39.95],
          zoom: 11,
          roam: true,
        }, //bmap
      })
      this.rightmap.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
    },

    //散点图1的方法
    addPonit1() {
      this.clean();
      console.log('--散点图1--');
      if (this.downSelectData !== '') {
        this.addPoint();
        this.addScatter()
      } else {
        this.$message({
          message: '请选择合适的数据',
          type: 'error'
        });
      }
    },
    //散点图1的具体实现方法 mapV
    addPoint() {
      let newData = [];
      for (let i = 0; i < this.scatterData.length; i++) {
        let itemlat = this.scatterData[i].lat;
        let itemlng = this.scatterData[i].lng;
        newData.push({
          geometry: {
            type: 'Point',
            coordinates: [itemlng, itemlat],
          },
        })
      }
      //等待时间设置为0的意义何在呢？
      this.view.addLayer(
          new mapvgl.PointLayer({
            blend: 'lighter',
            shape: 'circle',
            color: 'rgba(46, 139, 87, 0.9)',
            size: 3,
            data: newData,
          })
      )
      console.log('渲染成功');
      //},0)

    },

    //散点图2的方法
    addPonit2() {
      //判断数据是否为空
      if (this.downSelectData !== '') {
        this.addScatter()
      } else {
        this.$message({
          message: '请选择合适的数据',
          type: 'error'
        });
      }
    },

    //散点图2的具体实现方法
    //散点图2不是在view中生成的
    addScatter() {
      //首先清空数据
      this.Scatterdata2 = [];
      //遍历获取的所有数据
      for (let i = 1; i < this.scatterData.length; i++) {
        //赋值经纬度
        if (this.scatterData[i - 1].cid != this.scatterData[i].cid) {
          //0.0125和0.007 是用于解决百度地图经纬度的误差，至于为什么是这么大就不清楚了
          this.Scatterdata2.push([
            Number(this.scatterData[i - 1].lng) + 0.0125,
            Number(this.scatterData[i - 1].lat) + 0.007
          ])
        }
      }

      //setTimeout(() => {
      let mapData = {
        title: '散点图2',
        mapColor: '#5c9ac1',   //地图填充颜色
        borderColor: '#5278a7',//地图边框颜色
        shadowColor: '#5174a4', //阴影颜色
        shadowBlur: 1, //地图阴影
        setIntervalTime: 3000,  //默认刷新时间3秒
      };

      const option = {
        title: {
          text: '',
          right: '20px',
          top: 26,
          textStyle: {
            fontSize: 23,
            color: '#feb64d'
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: mapData.mapColor,
            borderColor: mapData.borderColor,
            shadowColor: mapData.shadowColor,
            shadowBlur: mapData.shadowBlur
          },
          emphasis: {
            areaColor: mapData.mapColor,
          }
        },
        series: [{
          type: 'scatterGL',
          coordinateSystem: 'bmap',
          // data: res.data,
          data: this.Scatterdata2,
          progressive: 1e6,
          progressiveThreshold: 100,
          symbolSize: function () {
            return 5;
          },
          blendMode: 'lighter',
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: false,
          itemStyle: {
            normal: {
              color: 'rgba(46, 139, 87,0.9)'
              //  color: 'rgb(0, 38, 70,1)' // 100% 处的颜色
            }
          },
          zlevel: 3
        }],
      }
      this.rightmap.setOption(option)
    },

    //清除图层
    clean() {
      this.view.removeAllLayers();
    }


  }
}
</script>

<style>

html, body, #scatterMap{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#scatterMap{
  position: relative;
  height:100%;
  width:100%;
}

.leftmap{
  height: 100%;
  float:left;
  width: 49%;
  /*width: 0%;*/
  margin: 0;
  padding: 0;
}

.middlemap {
  float:left;
  width: 0.1%;
  height: 100%;
  background-color: #113097;
}

.rightmap {
  height: 100%;
  float:left;
  width: 50.9%;
  margin: 0;
  padding: 0;
  background-color: #00CCFF;
}

#entirelab{
  position: absolute;
  font-weight: 500;
  color:  orange;
  font-size: 20px;
  margin-left: 18%;
  margin-top: 0.5%;
  z-index:600;
}

#partlab{
  position: absolute;
  z-index:600;
  font-weight: 500;
  color: orange;
  font-size: 20px;
  margin-left: 23%;
  margin-top: 0.5%
}

#partScatter{
  width: 100%;
  height: 100%;
}

#menuLeft {
  position: absolute;
  top: 40px;
  left: 12px;
  width: 21%;
  height: 21%;
  z-index: 100;
  font-size: 20px;
  font-weight: 700;
  color: white;
  background-color: rgba(49, 51, 53, 0.7);
  background-image: url("../../assets/image/public_resource/border_new1.png");
  background-size: 100% 100%;
  /*opacity: 0.8;*/
  border-radius: 20px;
  overflow: auto;
}

#menuLeft h5{
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}

#step1{
  margin-left: 45px;
}

#step2{
  margin-left: 37%;
  margin-top: 28px;

}
#loading {
  z-index: 99;
  position: absolute;
  top: 50%;
  left: 48%;
  margin-left: -130px;
  text-align: center;
  margin-top: -50px;
  width: 280px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: yellow;
  font-size: 20px;
}
</style>